<!DOCTYPE html>
<html>
<head>
<title>分配权限</title>
#include("/admin/_common/head.html")
<!-- 样 式 文 件 -->
<link rel="stylesheet" href="#CTX()/admin/css/form.css?_v=#VERSION()" />
</head>
<!-- 代 码 结 构 -->
<body class="pear-container">
    <form id="edit-form" class="layui-form" lay-filter="edit-form" onsubmit="return false;">
        <input type="hidden" name="id" value="#(bean.id??)">
        <input type="hidden" name="permissionIds">
        
        <div class="layui-card">
            <div class="layui-card-header">基本信息</div>
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" disabled value="#(bean.name)" />
                    </div>
                    <label class="layui-form-label">权限字符串</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" disabled value="#(bean.code)" />
                    </div>
                </div>
            </div>
            <div class="layui-card-header">分配系统权限</div>
            <div class="layui-card-body">
	            <div class="layui-panel">
	            	<div id="beans-tree"></div>
	            </div>
            </div>
        </div>
        <div class="bottom" style="display: none;">
            <div class="button-container">
                <button id="submit-button" onclick="getCheckedData();" type="submit" class="layui-btn layui-btn-sm" lay-submit lay-filter="submit-button">
                    <i class="layui-icon layui-icon-ok"></i> 提交
                </button>
            </div>
        </div>
    </form>

<!-- 资 源 引 入 -->
#include("/admin/_common/foot.html")

<script>
layui.use(['jquery', 'tree'], function() {
    let $ = layui.jquery, tree = layui.tree;
    let treeId = "beans-tree-1";
    
    // 模块操作路径
    let MODULE_PATH = "#CTX()/admin/system/permission/";

    /*
     * 从后台获取树的完整数据
     */
    window.getTreeData = () => {
        let data = [];
        
        $.ajax({
            url: MODULE_PATH + "tree?spread=3",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
                data = result;
            }
        });

        // 展开第一层
        data.forEach((item) => {item.spread = true;});
        
        return data;
    };
    
    /*
     * 从后台获取树中被选择的数据
     */
    window.querySelectedIds = () => {
    	let data = [];
    	
        $.ajax({
            url: MODULE_PATH + "queryByRole?roleId=#(bean.id??)",    //后台数据请求地址
            type: "get",
            async: false,
            success: function(result){
                for (let i = 0; i < result.length; i++){
                	data.push(result[i].id)
                }
            }
        });
        
        return data;
    };

    /*
     * 获取树中当前被选择的数据，存放到表单的指定input中
     */
    window.getCheckedData = () => {
        $("[name='permissionIds']").val($.tree.getCheckedIds(treeId).join());
    };
    
    /*
     * 渲染树
     */
    window.renderTree = () => {
        // 获取树的所有数据
        let data = getTreeData();
        // 渲染树控件
        tree.render({
            elem: '#beans-tree',
            id: treeId,
            data: data,
            method: "get",
            showCheckbox: true,  // 是否显示复选框
            height: 'full-95',
            accordion: true,
            customName: {
                title: 'name',
            }
        });
        
        if("#(bean.id??)" == ""){
        	// 新记录不处理下面的操作
            return;
        }
        
        // 获取树中被选择的数据，并调用共用方法使这此数据在树中变为被选中状态
        $.tree.selectChecked(treeId, data, querySelectedIds());
    };
    
    /*
     * 页面加载完成时加载树控件数据
     */
    $(document).ready(() => {
        renderTree();
    });
    
});
</script>
</body>
</html>
